<template>
    <el-select
        v-model="selectName"
        filterable
        remote
        v-bind="$attrs"
        clearable
        reserve-keyword
        placeholder="搜索楼盘名称"
        :remote-method="remoteMethod"
        :loading="loading"
        loading-text="正在加载中..."
        :popper-append-to-body="false"
        :teleported="false"
        @change="onSelectChange"
    >
        <template #prefix>
            <div class="label">
                <el-icon :size="16">
                    <Search />
                </el-icon>
            </div>
        </template>
        <template v-if="!loading" #empty>
            <div v-if="isCommon" class="noText">无数据</div>
            <template v-if="!isCommon">
                <div class="text">
                    {{ currentCompany ? '没有楼盘数据？换搜索词或创建新楼盘' : '未找到楼盘？请换搜索词或者创建新楼盘' }}
                </div>
                <div class="creatBtn" @click="onCreateHouse">+创建楼盘</div>
            </template>
        </template>
        <el-option
            v-for="item in projectNameList"
            :key="item.name"
            :label="item.name"
            :value="item.name"
            class="searchBox"
        >
            <div class="optionItem">
                <div>
                    <div>{{ item.name }}</div>
                    <span class="area">{{ item.provinceName }}/{{ item.cityName }}/{{ item.areaName }}</span>
                </div>
                <span class="typeClass">{{ item.typeName }}</span>
            </div>
        </el-option>
        <template v-if="!isCommon">
            <div class="text">
                {{ currentCompany ? '没有楼盘数据？换搜索词或创建新楼盘' : '未找到楼盘？请换搜索词或者创建新楼盘' }}
            </div>
            <div class="creatBtn" @click="onCreateHouse">+创建楼盘</div>
        </template>
    </el-select>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, defineEmits, defineProps } from 'vue';
import { queryPremises } from '@/api/houseManage';
import { handleWordLimit } from '@/utils/common';

const emits = defineEmits(['onSelect', 'createHouse']);
const props = defineProps({
    isCommon: {
        type: Boolean,
        default: true,
    },
    area: {
        type: Array,
        default: () => [],
    },
    projectName: {
        type: String,
        default: '',
    },
    currentCompany: {
        type: Boolean,
        default: true,
    },
    auditStatus: {
        type: Array,
        default: () => [],
    },
});

const loading = ref(false);
const projectNameList: any = ref([]);
const selectName = ref('');

onMounted(() => {
    selectName.value = props.projectName;
});

const remoteMethod = async (query: string): Promise<void> => {
    if (query) {
        loading.value = true;
        const params = props.auditStatus ? { auditStatus: props.auditStatus } : {};
        const data: Object = props.area.length
            ? {
                province: props.area[0],
                city: props.area[1],
                area: props.area[2],
                premiseName: query,
                currentCompany: props.currentCompany,
                auditStatus: props.auditStatus,
            }
            : { premiseName: query, currentCompany: props.currentCompany, auditStatus: props.auditStatus };
        try {
            const projectNameListData = await queryPremises(data);
            projectNameList.value = projectNameListData.data.map((item: any) => ({
                ...item,
                name: handleWordLimit(item.name, 15),
            }));
            loading.value = false;
        } catch {
            loading.value = false;
        }
    }
};
// 选择楼盘传入父组件当前楼盘的对象
const onSelectChange = (value: number) => {
    const premiseItem = value ? projectNameList.value.find((item: any) => item.name === value) : {};
    emits('onSelect', premiseItem);
};
const onCreateHouse = () => {
    emits('createHouse');
};

watch(
    () => props.area,
    () => {
        projectNameList.value = [];
    }
);
watch(
    () => props.projectName,
    (projectName) => {
        selectName.value = projectName;
    }
);

defineExpose({
    projectNameList,
});
</script>

<style lang="scss" scoped>
.searchBox {
    height: auto !important;
    line-height: 22px;
    padding: 5px 15px;

    .optionItem {
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {
            font-size: 14px;
            color: #333333;
        }

        span {
            color: #8c8c8c;
            font-size: 12px;
        }

        .typeClass {
            font-size: 14px;
        }
    }

    .area {
        font-size: 12px;
        line-height: 14px;
        color: #8c8c8c;
    }
}

.noText {
    height: 45px;
    font-size: 14px;
    color: #8c8c8c;
    padding-top: 10px;
    text-align: center;
}

.text {
    font-size: 14px;
    color: #333333;
    padding-left: 15px;
    line-height: 32px;
    cursor: pointer;
}

.creatBtn {
    font-size: 15px;
    color: #e60044;
    line-height: 32px;
    padding-left: 15px;
    cursor: pointer;
}

::v-deep(.el-input__prefix) {
    top: 2px;
}
</style>
